<template>
	<view class="list-tags">
		<view class="list-tags-title">
			<view class="">
				<image :src="tagImg" mode="widthFix"></image>
				{{ tagTitle }}
			</view>
			<view @tap="toTagPage" class="icon iconfont icon-gengduo"></view>
		</view>
		<view class="list-tags-body">
			<block v-for="(tag, t_indx) in tagList" :key="t_indx">
				<view class="tag-item" @tap="tagInfoItem(tag)">
					<view class="tag-img"><image :src="tag.tagPic" mode="widthFix" lazy-load></image></view>
					<view class="tag-name">{{ tag.tagName }}</view>
					<view class="tag-desc">{{ tag.num|toStr }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import constant from '../../utils/Constant.js';
export default {
	props: {
		tagList: Array,
		tagImg: String,
		tagTitle: String,
		type: Number
	},
	methods: {
		...mapMutations(['setSelectTag']),
		toTagPage() {
			uni.navigateTo({
				url: `../tag-list/tag-list?type=${this.type}&pageTitle=${this.tagTitle}`
			});
		},
		tagInfoItem(tag) {
			this.setSelectTag(tag);
			uni.navigateTo({
				url: '../tag-info-list/tag-info-list'
			});
		}
	},
	filters: {
		toStr(val) {
			let text = uni.getStorageSync(constant.user).userSex === 1?'个女生':'个男生';
			return val + text;
		}
	}
};
</script>

<style lang="less" scoped>
.list-tags {
	padding: 25rpx 20rpx 35rpx 20rpx;
	border-top: 1rpx solid #eeeeee;
	.list-tags-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		& > view:first-child {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 32rpx;
			font-weight: 700;
		}
		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		& > view:last-child {
			color: #999999;
		}
	}

	.list-tags-body {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.tag-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tag-img {
				width: 200rpx;
				height: 200rpx;
			}
			image {
				width: 100%;
				border-radius: 20rpx;
			}

			.tag-name {
				font-size: 28rpx;
				font-weight: 700;
			}
			.tag-desc {
				color: #999999;
				font-size: 24rpx;
				line-height: 24rpx;
			}
		}
	}
}
</style>
